<template>
	<div class="main">
		<div class="pie">
			<div class="pie-before"></div>
		</div>
	</div>

</template>

<script>
    export default {
        name: "pie"
    }
</script>

<style scoped>
	.main{
		width: 100%;
		text-align: center;
	}
	.pie {
		margin: 0 auto;
		width: 220px;
		height: 220px;
		border-radius: 50%;
		background: #369CF0;
		background-image: linear-gradient(to right, transparent 50%, #CCE8F6 0);
	}

	.pie-before {
		content: '';
		display: block;
		margin-left: 50%;
		height: 100%;
		border-radius: 0 100% 100% 0/50%;
		background-color: inherit;
		transform-origin: left;
		transform: rotate(0turn);
	}
</style>
